{%extends "base.html"%}
{%block title%}
比赛排名
{%endblock%}
{%block body%}
<script>
    let ranklist;
    $(document).ready(() => {
        ranklist = new Vue({
            delimiters: ['{[', ']}'],
            el: "#ranklist",
            mixins: [baseMixin],
            data: {
                data: null,
                done: false,
            }, methods: {

            }
        });
        axios.post("/api/contest/ranklist", { contestID: window.location.href.split("/").pop() }).then(ctx => {
            // ctx = JSON.parse(ctx);
            ctx = ctx.data;
            if (ctx.code) {
                showErrorModal(ctx.message);
                return;
            }
            ranklist.data = ctx.data;
            ranklist.done = true;
        });
    });
</script>



<div id="ranklist" v-if="done">
    <div class="ui header ">
        <h1>{[data.name]} - 排行榜</h1>
    </div>
    <div class="ui segment stacked" style="overflow-x: scroll;max-height: 1000px;">
        <table class="ui very basic  table">
            <thead>
                <tr class="ui sticky">
                    <th></th>
                    <th>用户名</th>
                    <th class="center aligned">
                        总分
                    </th>
                    <th v-for="problem in data.problems" class="center aligned" style="min-width: 100px;">
                        <a :href="'/contest/'+data.contest_id+'/problem/'+problem.id">{[problem.id]}.
                            {[problem.name]}</a>
                        <div><span style="color:green">{[problem.accepted_submit]}</span>/{[problem.total_submit]}</div>
                    </th>

                </tr>
            </thead>
            <tbody>
                <tr v-for="line,i in data.ranklist">
                    <td class="center aligned">
                        <div class="ui yellow ribbon label" v-if="i==0">
                            1
                        </div>
                        <div class="ui  ribbon label" v-else-if="i==1">
                            2
                        </div>
                        <div class="ui brown ribbon label" v-else-if="i==2">
                            3
                        </div>
                        <div v-else>
                            {[i+1]}
                        </div>
                    </td>
                    <td><a :href="'/profile/'+line.uid">{[line.username]}</a></td>
                    <td class="center aligned">
                        <span v-if="data.using_penalty==false">
                            <div style="color: green;">{[line.total.score]}</div>
                            <div style="color: red;">
                                {[line.total.submit_time_sum]}
                            </div>
                        </span>
                        <span v-else>
                            <div style="color:green">{[line.total.ac_count]}</div>
                            <div style="color:red">{[line.total.penalty]}</div>
                        </span>
                    </td>
                    <td class="center aligned" v-for="item in line.scores"
                        v-bind:class="{positive:item.status=='accepted',negative:item.status=='unaccepted'}">
                        <div v-if="item.submit_id!=-1">
                            <a :href="'/show_submission/'+item.submit_id">
                                <span v-if="data.using_penalty==false">
                                    <div>
                                        {[item.score]}
                                    </div>
                                    <div style="color: red;">
                                        {[item.submit_time]}
                                    </div>
                                </span>
                                <span v-else>
                                    <div v-if="item.status=='accepted'">
                                        <div>-{[item.submit_count]}</div>
                                        <div style="color:red">{[item.penalty]}</div>
                                    </div>
                                    <div v-else>-{[item.submit_count]}</div>
                                </span>
                            </a>
                        </div>
                    </td>

                </tr>
            </tbody>
        </table>
    </div>
</div>

{%endblock%}